import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Table, Button, Divider, Popconfirm, Col } from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';
import ProductFunctionForm from './components/add';
import ProductFunctionEditForm from './components/edit';

// const ProductFunctionForm = Form.create()(props => {
//   const { modalVisible, showFormIndex, form, handleModalVisible, handleShowFormIndex,} = props;

//   const okHandle = () => {
//     form.validateFields((err, fieldsValue) => {
//       if (err) return;
//       console.log(JSON.stringify(fieldsValue))
//     });
//   };

//   const handleSizeChange = e => {
//     handleShowFormIndex(e.target.value);
//   };

//   const showForm = () => {
//     if (showFormIndex === '1') {
//       return <ProductFunctionProp />
//     }
//     if (showFormIndex === '2') {
//       return <ProductFunctionService />;
//     }
//     if (showFormIndex === '3') {
//       return <ProductFunctionEvent />;
//     }
//     return null;
//   };

//   return (
//     <Modal
//       title="添加功能"
//       destroyOnClose
//       visible={modalVisible}
//       width={618}
//       onCancel={() => handleModalVisible()}
//       onOk={okHandle}
//     >
//       <div style={{ width: 530, paddingLeft: 44 }}>
//         <FormItem label="功能类型" colon={false}>
//           {form.getFieldDecorator('fun', {
//             rules: [{ required: true }],
//             initialValue: showFormIndex,
//           })(
//             <Radio.Group onChange={handleSizeChange}>
//               <Radio.Button value="1">属性</Radio.Button>
//               <Radio.Button value="2">服务</Radio.Button>
//               <Radio.Button value="3">事件</Radio.Button>
//             </Radio.Group>,
//           )}
//         </FormItem>
//         {showForm()}
//       </div>
//     </Modal>
//   );
// });

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
class ProductFunction extends PureComponent {
  state = {
    modalVisible: false,
    showFormIndex: '1',
    editModalVisible: false,
    functionType: '1',
  };

  standardColumns = [
    {
      key: 'functionType',
      title: formatMessage({ id: 'app.dm.product.function.table.functionType' }),
      dataIndex: 'functionType',
      width: 100,
      render: (text, record) => {
        if (record.functionType === 1) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.prop' });
        }
        if (record.functionType === 2) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.service' });
        }
        if (record.functionType === 3) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.event' });
        }
        return null;
      },
    },
    {
      key: 'functionName',
      title: formatMessage({ id: 'app.dm.product.function.table.functionName' }),
      dataIndex: 'functionName',
      width: 150,
    },
    {
      key: 'label',
      title: formatMessage({ id: 'app.dm.product.function.table.label' }),
      dataIndex: 'label',
      width: 150,
    },
    {
      key: 'dataTypeName',
      title: formatMessage({ id: 'app.dm.product.function.table.dataType' }),
      dataIndex: 'dataTypeName',
      width: 100,
    },
    {
      key: 'dataDefinition',
      title: formatMessage({ id: 'app.dm.product.function.table.dataDefinition' }),
      dataIndex: 'dataDefinition',
      width: 150,
    },
    {
      key: 'action',
      title: formatMessage({ id: 'app.dm.product.function.table.action' }),
      width: 80,
      render: record => (
        <Fragment>
          <a onClick={() => this.editView(record.functionType, record.id)}>
            <FormattedMessage id="app.dm.product.function.table.action.edit" />
          </a>
        </Fragment>
      ),
    },
  ];

  customColumns = [
    {
      key: 'functionType',
      title: formatMessage({ id: 'app.dm.product.function.table.functionType' }),
      dataIndex: 'functionType',
      width: 100,
      render: (text, record) => {
        if (record.functionType === 1) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.prop' });
        }
        if (record.functionType === 2) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.service' });
        }
        if (record.functionType === 3) {
          return formatMessage({ id: 'app.dm.product.function.table.functionType.event' });
        }
        return null;
      },
    },
    {
      key: 'functionName',
      title: formatMessage({ id: 'app.dm.product.function.table.functionName' }),
      dataIndex: 'functionName',
      width: 150,
    },
    {
      key: 'label',
      title: formatMessage({ id: 'app.dm.product.function.table.label' }),
      dataIndex: 'label',
      width: 150,
    },
    {
      key: 'dataTypeName',
      title: formatMessage({ id: 'app.dm.product.function.table.dataType' }),
      dataIndex: 'dataTypeName',
      width: 100,
    },
    {
      key: 'dataDefinition',
      title: formatMessage({ id: 'app.dm.product.function.table.dataDefinition' }),
      dataIndex: 'dataDefinition',
      width: 150,
    },
    {
      key: 'action',
      title: formatMessage({ id: 'app.dm.product.function.table.action' }),
      width: 80,
      render: record => (
        <Fragment>
          <a onClick={() => this.editView(record.functionType, record.id)}>
            <FormattedMessage id="app.dm.product.function.table.action.edit" />
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title={
              <div style={{ width: 280 }}>
                <div style={{ fontWeight: 'bold', color: '000', marginBottom: 10 }}>
                  <span>
                    {formatMessage(
                      { id: 'app.dm.product.function.del.confirm' },
                      { name: record.functionName },
                    )}
                  </span>
                </div>
              </div>
            }
            onConfirm={() => this.handleDelete(record.functionType, record.id)}
          >
            <a>
              <FormattedMessage id="app.dm.product.function.table.action.del" />
            </a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch, params } = this.props;

    dispatch({
      type: 'product/fetchStandardFunction',
      payload: params.id,
    });
    dispatch({
      type: 'product/fetchCustomFunction',
      payload: params.id,
    });
  }

  handleDelete = (type, id) => {
    const { dispatch, params } = this.props;
    if (type === 1) {
      // 属性
      dispatch({
        type: 'product/delProp',
        payload: id,
        params,
      });
    } else if (type === 2) {
      this.setState({ functionType: '2' });
    } else if (type === 3) {
      this.setState({ functionType: '3' });
    }
  };

  editView = (type, id) => {
    const { dispatch } = this.props;
    const { handleEditModalVisible } = this;
    if (type === 1) {
      // 属性
      this.setState({ functionType: '1' });
      dispatch({
        type: 'product/fetchProp',
        payload: id,
        handleEditModalVisible,
      });
    } else if (type === 2) {
      this.setState({ functionType: '2' });
    } else if (type === 3) {
      this.setState({ functionType: '3' });
    }
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleEditModalVisible = flag => {
    this.setState({
      editModalVisible: !!flag,
    });
  };

  handleShowFormIndex = index => {
    this.setState({
      showFormIndex: index,
    });
  };

  render() {
    const { modalVisible, showFormIndex, editModalVisible, functionType } = this.state;
    const {
      product: { standardFunctionList, customFunctionList, functionDetail },
      loading,
      params,
    } = this.props;
    const parentMethods = {
      handleModalVisible: this.handleModalVisible,
      handleShowFormIndex: this.handleShowFormIndex,
      params,
    };

    const editModalProps = {
      handleModalVisible: this.handleEditModalVisible,
      detail: functionDetail,
      type: functionType,
    };

    return (
      <Fragment>
        <Row>
          <span style={{ fontWeight: 'bold', fontSize: 20 }}>
            <FormattedMessage id="app.dm.product.function.standard.function" />
          </span>
        </Row>
        <Row>
          <Table
            columns={this.standardColumns}
            dataSource={standardFunctionList}
            loading={loading}
            rowKey="id"
            pagination={false}
            style={{ marginTop: 15 }}
          />
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col span={12}>
            <span style={{ fontWeight: 'bold', fontSize: 20 }}>
              <FormattedMessage id="app.dm.product.function.custom.function" />
            </span>
          </Col>
          <Col span={12} style={{ textAlign: 'right' }}>
            <Button type="primary" onClick={() => this.handleModalVisible(true)}>
              <FormattedMessage id="app.dm.product.function.add" />
            </Button>
          </Col>
        </Row>
        <Row>
          <Table
            columns={this.customColumns}
            dataSource={customFunctionList}
            loading={loading}
            pagination={false}
            rowKey="id"
            style={{ marginTop: 15 }}
          />
        </Row>
        <ProductFunctionForm
          {...parentMethods}
          modalVisible={modalVisible}
          showFormIndex={showFormIndex}
        />

        <ProductFunctionEditForm {...editModalProps} modalVisible={editModalVisible} />
      </Fragment>
    );
  }
}

export default ProductFunction;
